<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="社区" :leftIcon="false"></NavBarVue>
		<view class="flex bg-white rounded-lg mx-30 mb-30 py-10">
			<view class="flex-1 flex flex-col justify-center items-center" v-for="e,i in tabList" :key="i"
				@click="handleChange(e.id)">
				<ImageBoxVue :src="e.icon" width="80rpx" height="80rpx"></ImageBoxVue>
				<text class="text-sm mt-10" :class="[tabId==e.id&&'text-[#329EFF]']">{{e.name}}</text>
			</view>
		</view>
		<view class="bg-white rounded-lg mx-30 p-20 mb-30 py-10" v-if="userList.length>0">
			<scroll-view scroll-x class="w-full">
				<view class="flex">
					<UserVue class="mr-20" v-for="e,i in userList" :key="i" :val="e"></UserVue>
				</view>
			</scroll-view>
		</view>
		<view class="flex mb-30 px-30">
			<ImageBoxVue src="/static/community/add_post.png" width="698rpx" height="88rpx" @click="addPost">
			</ImageBoxVue>
			<!-- <ImageBoxVue src="/static/community/forum.png" width="351rpx" height="97rpx"></ImageBoxVue> -->
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full" :refresher-enabled="refresherEnabled" :refresher-triggered="triggered"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort" @scrolltolower="onReachBottom">
				<template v-if="tabId != 1">
					<view class="px-30" v-if="postList.length">
						<PostListVue v-for="e,i in postList" :key="i" :val="e"></PostListVue>
					</view>
				</template>
				<template v-else>
					<view class="px-30" v-if="talkList.length">
						<talkListVue v-for="e,i in talkList" :key="i" :val="e"></talkListVue>
					</view>
				</template>
			</scroll-view>
		</view>
	</view>
	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
		<view class="bg-white rounded-t-lg p-30">
			<AddPostVue :type-list="typeList" @on-send="onSend"></AddPostVue>
		</view>
	</uni-popup>
	<uni-popup ref="replyRef" type="bottom" border-radius="10px 10px 0 0">
		<view class="bg-white rounded-t-lg p-30 flex items-center">
			<view class="flex-1 mr-20 border-[#dfe2e5] border-solid rounded-sm overflow-hidden">
				<textarea :value="reply" @blur="e=>reply=e.detail.value" class="p-10 h-full" style="min-height: 50rpx;"
					:cursor-spacing="30" auto-height placeholder="请输入内容" />
			</view>
			<view class="flex">
				<button type="default" size="mini" style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
					hover-class="is-hover" @click="onReplySave">发送</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		provide,
		computed
	} from 'vue';
	import {
		onLoad,
	} from "@dcloudio/uni-app"
	import UserVue from '@/components/User.vue'
	import LiveBoxVue from './components/live/LiveBox.vue';
	import liveApi from '@/apis/apiList/liveApi';
	import testApi from '@/apis/apiList/testApi';
	import communityApi from '@/apis/apiList/communityApi';
	import PostListVue from './components/community/PostList.vue';
	import talkListVue from './components/community/talkList.vue';
	import AddPostVue from './components/community/AddPost.vue';
	const userList = ref([])
	const tabId = ref("")
	const tabList = ref([])
	const typeList = ref([])
	const popupRef = ref(null)
	const replyRef = ref(null)
	const reply = ref("")
	const postList = ref([])
	const talkList = ref([])
	const page = ref(1)
	const loadMore = ref("more")
	const refresherEnabled = ref(true)
	const triggered = ref(false)
	const _freshing = ref(false)

	const showTalk = computed(() => {
		const arr = uni.getStorageSync('dict')
		let str = ''
		arr.map(item => {
			if (item.name == "Bbsconfig") {
				str = item.minv
			}
		})
		return str
	})

	onLoad(() => {
		getisrecAnchorlist()
		getBbsplatelist()
		getWorkBbsplatelist()
	})

	const onPulling = (e) => {
		console.log("onpulling", e);
	}
	const onRefresh = () => {
		if (_freshing.value) return;
		_freshing.value = true;
		page.value = 1
		getPosslistAtplateId(tabId.value)
	}
	const onRestore = () => {
		triggered.value = 'restore'; // 需要重置
		console.log("onRestore");
	}
	const onAbort = () => {
		console.log("onAbort");
	}

	const onReachBottom = () => {
		if (loadMore.value == 'more') {
			page.value = page.value + 1
			getPosslistAtplateId(tabId.value)
		}
	}

	const handleChange = (id) => {
		console.log(id)
		if (tabId.value != id) {
			page.value = 1
			_freshing.value = true;
			if (id != 1) {
				getPosslistAtplateId(id)
			} else {
				getTalkList(id)
			}
		}
	}

	const getisrecAnchorlist = () => {
		liveApi.getisrecAnchorlist().then(res => {
			userList.value = res.data
		})
	}
	const getBbsplatelist = () => {
		communityApi.getBbsplatelist().then(res => {
			// tabId.value = res.data[0].id
			if (showTalk.value == 1) {
				res.data.push({
					id: 1,
					name: "讨论区",
					icon: "http://app.shudong521.com/fileUp/files/20250602085413805.png"
				})
			}
			tabList.value = res.data
			getPosslistAtplateId(res.data[0].id)
		})
	}
	const getWorkBbsplatelist = () => {
		communityApi.getWorkBbsplatelist().then(res => {
			// tabId.value = res.data[0].id
			if (showTalk.value == 1) {
				res.data.push({
					id: 1,
					name: "讨论区",
					icon: "http://app.shudong521.com/fileUp/files/20250602085413805.png",
					btp: 4
				})
			}
			typeList.value = res.data
		})
	}
	const getTalkList = (id) => {
		loadMore.value = 'loading'
		triggered.value = true
		tabId.value = id
		communityApi.getpostlist({
			page: page.value,
			limit: 10
		}).then(res => {
			if (page.value == 1) {
				talkList.value = res.data
				triggered.value = false;
				_freshing.value = false;
			} else {
				talkList.value = [...talkList.value, ...res.data]
			}
			if (res.data.length == 0) {
				loadMore.value = 'noMore'
			} else {
				loadMore.value = 'more'
			}
		})
	}
	const getPosslistAtplateId = (id) => {
		loadMore.value = 'loading'
		triggered.value = true
		tabId.value = id
		communityApi.getPosslistAtplateId({
			id: tabId.value,
			page: page.value,
			limit: 10
		}).then(res => {
			if (page.value == 1) {
				postList.value = res.data
				triggered.value = false;
				_freshing.value = false;
			} else {
				postList.value = [...postList.value, ...res.data]
			}
			if (res.data.length == 0) {
				loadMore.value = 'noMore'
			} else {
				loadMore.value = 'more'
			}
		})
	}
	const addPost = () => {
		popupRef.value.open()
	}
	const onSend = () => {
		popupRef.value.close()
		getPosslistAtplateId(tabId.value)
	}
	const onReplySave = () => {
		const params = {
			tou: 1,
			"poss.id": possId.value,
			"member.id": uni.getStorageSync('user').id,
			sts: 0,
			details: reply.value,
			headimg: ""
		}
		communityApi.anchorpretPoss(params).then(res => {
			reply.value = ""
			uni.showToast({
				icon: 'none',
				title: '发送成功'
			})
			replyRef.value.close()
			getBbsplatelist()
		})

	}
</script>

<style>
	.is-hover {
		color: rgba(255, 255, 255, 0.6);
		background-color: #2e9b22;
		border-color: #2e9b22;
	}
</style>